<template>
    <view>
        <canvas canvas-id="mSetimg" :style="{width: canvasWH.width + 'px', height: canvasWH.height + 'px'}" class="my-canvas"
            disable-scroll="false"></canvas>
    </view>
</template>

<script>
    export default {
        props: {
            type: {
                type: Number,
                default: 1,
            },
            canvasWH: {
                type: Object,
                default: function() {
                    return {
                        width: 750,
                        height: 1334,
                        bgcolor: ''
                    }
                }
            }
        },
        created() {
            this.ctxCanvas = uni.createCanvasContext('mSetimg', this);
        },
        computed:{
            userInfo(){
                return this.$store.state.userInfo
            }
        },
        methods: {
            haibao(calData, callback) {
                uni.showLoading({
                    title: '加载中',
                    mask: true
                });
                // if(this.canvasWH.bgcolor){
                //     this.drawColor()
                // }
                this.image('mSetimg', calData.imgList, calData.textList, callback);
            },
            image(canvasId, imgList, textList, callback) {
                let _that = this;
                let ctx = this.ctxCanvas;
                let down = i => {
                    let item = imgList[i];
                    if (!item || !item.u) {
                        down(++i);
                        return;
                    }
                    if(_that.userInfo.testStatus){
                        uni.showModal({
                            title: '提示',
                            content: `${imgList[i].u}`,
                            showCancel: false,
                            confirmColor: '#0DE5CE'
                        })
                    }
                    if (item.base64) {
                        // console.log(item.u)
                        this.drawImg(item, {tempFilePath:item.u});
                        if (i >= imgList.length - 1) {
                            this.setFont(textList);
                            ctx.draw(false, res => {
                                setTimeout(() => {
                                    uni.canvasToTempFilePath({
                                            canvasId: canvasId,
                                            width: _that.canvasWH.width,
                                            height: _that.canvasWH.height,
                                            destWidth: _that.canvasWH.width,
                                            destHeight: _that.canvasWH.height,
                                            quality: 1,
                                            success: function(res) {
                                                callback(res.tempFilePath);
                                            },
                                            fail: function(res) {
                                                console.log(JSON.stringify(
                                                    res));
                                            },
                                            complete: function(res) {
                                                uni.hideLoading();
                                            }
                                        },
                                        this
                                    );
                                }, 200);
                            });
                        } else {
                            down(++i);
                        }
                    }else{
                        // console.log(item.u)
                        uni.downloadFile({
                            url: item.u,
                            success: res => {
                                if (res.statusCode === 200) {
                                    this.drawImg(item, res);
                                    if (i >= imgList.length - 1) {
                                        this.setFont(textList);
                                        ctx.draw(false, res => {
                                            setTimeout(() => {
                                                uni.canvasToTempFilePath({
                                                        canvasId: canvasId,
                                                        width: _that.canvasWH.width,
                                                        height: _that.canvasWH.height,
                                                        destWidth: _that.canvasWH.width,
                                                        destHeight: _that.canvasWH.height,
                                                        quality: 1,
                                                        success: function(res) {
                                                            callback(res.tempFilePath);
                                                        },
                                                        fail: function(res) {
                                                            console.log(JSON.stringify(
                                                                res));
                                                        },
                                                        complete: function(res) {
                                                            uni.hideLoading();
                                                        }
                                                    },
                                                    this
                                                );
                                            }, 200);
                                        });
                                    } else {
                                        down(++i);
                                    }
                                }
                            },
                            fail: () => {
                                if(_that.userInfo.testStatus){
                                    uni.showModal({
                                        title: '提示',
                                        content: `下载图片失败${item.u}`,
                                        showCancel: false,
                                        confirmColor: '#0DE5CE'
                                    })
                                }
                                uni.hideLoading();
                                // uni.showToast({
                                // 	title: '网络异常，请重试',
                                // 	icon: 'none'
                                // });
                            }
                        });
                    }
                }
                if (imgList.length != 0) {
                    down(0);
                }
            },
            // 上色
            drawColor() {
                let ctx = this.ctxCanvas;
                ctx.setFillStyle(this.canvasWH.bgcolor);
                ctx.fillRect(0, 0, this.canvasWH.width, this.canvasWH.height)
            },
            // 绘图
            drawImg(item, res) {
                let ctx = this.ctxCanvas;
                if (item.PI) {
                    ctx.save();
                    ctx.beginPath();
                    ctx.arc(item.x + item.w / 2, item.y + item.w / 2, item.w / 2, 0, 2 * Math.PI);
                    ctx.clip();
                    ctx.drawImage(res.tempFilePath, item.x, item.y, item.w, item.h);
                    ctx.restore();
                } else {
                    if (item.circle) {
                        ctx.save();
                        ctx.beginPath();
                        ctx.arc(item.x + item.w / 2, item.y + item.h / 2, item.r, 0, 2 * Math.PI);
                        ctx.setStrokeStyle('#E9E9E9');
                        ctx.stroke();
                        ctx.clip();
                        ctx.drawImage(res.tempFilePath, item.x, item.y, item.w, item.h);
                        ctx.restore();
                    } else {
                        ctx.drawImage(res.tempFilePath, item.x, item.y, item.w, item.h);
                    }
                }
            },
            //绘制文字
            setFont(arr) {
                let ctx = this.ctxCanvas;
                let s = 20 * this.scale; //默认字体大小
                let f = `normal normal ${s}px Source Han Sans CN`;
                ctx.setTextBaseline('top');
                arr.forEach((item, index) => {
                    ctx.setFontSize(item.s || s);
                    ctx.font = item.f || f;
                    ctx.setTextAlign(item.setTextAlign || 'left');
                    if (item.setShadow) {
                        ctx.setShadow(...item.setShadow)
                    } else {
                        ctx.setShadow(0, 0, 0, '#000000')
                    }
                    ctx.setFillStyle(item.strokeStyle || '#000000');
                    let textWidth = 0;
                    try {
                        textWidth = ctx.measureText(item.t).width;
                    } catch (err) {
                        textWidth = item.s * item.t.length;
                    }
                    if (item.maxWidth) {
                        if (textWidth <= item.maxWidth) {
                            ctx.fillText(item.t, item.x, item.y, item.maxWidth);
                        } else {
                            this.wordWrap(item.t, item.s, item.x, item.y, item.maxWidth);
                        }
                    } else {
                        ctx.fillText(item.t, item.x, item.y);
                    }
                    if (item.lineThrough) {
                        ctx.fillRect(item.x, item.y + item.s / 2, textWidth, 1);
                    }
                });
            },
            // 绘制文字换行
            wordWrap(t, s, x, y, m) {
                let chr = t.split(''); // 分割为字符串数组
                let temp = '';
                let row = [];
                for (let a = 0; a < chr.length; a++) {
                    let tempWidth = 0;
                    try {
                        tempWidth = this.ctxCanvas.measureText(temp).width;
                    } catch (err) {
                        tempWidth = s * temp.length;
                    }
                    if (tempWidth < m) {
                        temp += chr[a];
                    } else {
                        a--;
                        row.push(temp);
                        temp = '';
                    }
                }
                row.push(temp);
                for (var b = 0; b < row.length; b++) {
                    if (b < row.length) {
                        this.ctxCanvas.fillText(row[b], x, y + b * s * 1.5);
                    }
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
    .my-canvas {
        position: fixed;
        top: 10000px;
        left: 10000px;
        // width: 750px;
        // height: 1334px;
    }
</style>
